<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      发布评价
    </view>
    <view class="content">
      <view class="box">
        <image class="img" :src="detail.image" mode="" />
        <view class="rig">
          <view class="top">
            <text>{{ detail.name }}</text>
            <text>¥{{ detail.price }}</text>
          </view>
          <view class="cen">
            <text class="num">x{{ detail.number }}</text>
          </view>
        </view>
      </view>
      <textarea
        v-model="content"
        placeholder="从多个角度评价宝贝，可以帮助更多想买的人"
      />
      <g-upload
        ref="gUpload"
        @imgDelete="imgDelete"
        @chooseFile="chooseFile"
        :control="true"
        :columnNum="3"
        :maxCount="3"
      ></g-upload>
      <view class="release" @click="release">发布</view>
    </view>
  </view>
</template>

<script>
import gUpload from "@/components/g-upload/g-upload.vue";
export default {
  data() {
    return {
      token: "",
      imgarr: [],
      order_sn: "",
      detail: "",
      content: "",
    };
  },
  components: {
    gUpload,
  },
  onLoad(e) {
    this.token = uni.getStorageSync("token");
    this.order_sn = e.order_sn;
    this.orderDetail(this.order_sn);
  },
  methods: {
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 获取订单详情
    async orderDetail(id) {
      const res = await this.$myRequest({
        url: "order/orderDetail",
        method: "POST",
        data: {
          order_sn: id,
        },
      });
      if (res.data.code == 1) {
        this.detail = res.data.data;
      }
    },
    // 图片上传
    chooseFile(v) {
      this.uploadFileToServe(v);
    },
    // 图片删除
    imgDelete(eq) {
      this.imgarr.splice(eq, 1);
    },
    uploadFileToServe(urlList) {
      let that = this;
      if (!urlList || urlList.length <= 0) {
        return;
      }
      that.imgarr = [];
      for (let i = 0; i < urlList.length; i++) {
        uni.uploadFile({
          url: "https://www.123qifu.com/api/common/upload", //仅为示例，非真实的接口地址
          header: {
            token: that.token,
          },
          filePath: urlList[i],
          name: "file",
          formData: {},
          success: (uploadFileRes) => {
            const list = JSON.parse(uploadFileRes.data);
            const str = list.data.url;
            that.imgarr.push(str);
          },
        });
      }
    },
    // 发布
    async release() {
      if (this.content == "") {
        uni.showToast({
          title: "请输入评价的内容",
          icon: "none",
        });
        return;
      }
      const res = await this.$myRequest({
        url: "order/orderComment",
        method: "POST",
        data: {
          order_sn: this.order_sn,
          content: this.content,
          reasonInfo: this.reasonInfo,
          images: this.imgarr.join(","),
        },
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
        this.gobackClick();
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f4f4f4;
  min-height: 100vh;
  position: relative;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  margin-top: 110rpx;
  position: relative;
  background: #ffff;
  .box {
    display: flex;
    box-sizing: border-box;
    padding: 30rpx;
    .img {
      display: block;
      width: 180rpx;
      height: 180rpx;
      object-fit: cover;
      margin-right: 25rpx;
      border-radius: 4rpx;
    }
    .rig {
      flex: 1;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      text {
        display: block;
        font-size: 28rpx;
        color: #333333;
        font-weight: normal;
      }
      text:nth-child(1) {
        font-weight: bold;
      }
      .cen {
        text-align: right;
        margin-top: 25rpx;
        .num {
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
  textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
    font-size: 26rpx;
    background: none;
    border: none;
    outline: none;
  }
  .release {
    width: 350rpx;
    height: 74rpx;
    background: #c52b2e;
    border-radius: 37rpx;
    text-align: center;
    line-height: 74rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -180rpx;
  }
}
</style>
